/* 全局样式 */
page {
    background-color: white;
    font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
  }
  
  /* 退出登录按钮 */
  .logout-btn {
    background-color:var(--main-button-bgcolor) !important ; /* 渐变背景 */
    color: white;
    font-size: 24rpx;
    padding: 20rpx;
    border-radius: 50rpx;
    margin-top: 30rpx;
    animation: scaleAnimation 0.3s ease; /* 添加动画 */
  }
  
  .logout-btn:active {
    transform: scale(0.9); /* 点击时缩放 */
  }
  
  @keyframes scaleAnimation {
    from {
      transform: scale(1);
    }
    to {
      transform: scale(1.05);
    }
  }
  
  .container {
    padding-bottom: 40rpx;
  }
  
  /* 顶部用户信息区 */
  .top-section {
    margin-top: -200rpx;
    width: 700rpx;
    background: linear-gradient(135deg, #ffd9e1, hsl(351, 100%, 84%));
    padding: 40rpx 30rpx 60rpx;
    position: relative;
    margin-bottom: 80rpx;
    border-bottom-left-radius: 30rpx;
    border-bottom-right-radius: 30rpx;
    box-shadow: 0 10rpx 30rpx rgba(255, 143, 163, 0.3);
  }
  
  .user-card {
    display: flex;
    align-items: center;
    background: white;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 2;
    margin-top: 20rpx;
  }
  
  .avatar {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid #FFECF1;
    margin-right: 25rpx;
  }
  
  .user-info {
    flex: 1;
  }
  
  .username {
    font-size: 36rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
    display: block;
  }
  
  .upgrade-card {
    background: linear-gradient(to right, #FFD1DC, #FFB5C5);
    border-radius: 50rpx;
    padding: 2rpx;
    display: flex;
    align-items: center;
  }
  
  .upgrade-text {
    font-size: 24rpx;
    color: black;
    margin-right: -190rpx;
  }
  
  .upgrade-btn {
    background: white;
    color: #FF6B8B;
    font-size: 24rpx;
    padding: 6rpx 10rpx;
    border-radius: 30rpx;
    font-weight: bold;
  }
  
  /* 数据卡片 */
  .data-section {
    padding: 0 30rpx;
    position: relative;
    z-index: 1;
    margin-top: -60rpx;
  }
  
  .data-card {
    background: white;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
    image{
      width: 70rpx;
      height:  70rpx;
    }
    .data-you{
      color: #FF6B8B;
      font-weight: 800;
      margin-left: -390rpx;
      margin-top: 10rpx;
    }
    text{
      margin-top: 16rpx;
      margin-right: 20rpx;
      font-weight: 700;
      color: gray;
    }
  }
  
  .data-grid {
    display: flex;
    justify-content: space-between;
    width: 650rpx;
  }
  

  
  .data-value {
    font-size: 36rpx;
    font-weight: bold;
    color: #FF6B8B;
    margin-bottom: 10rpx;
  }
  
  .data-label {
    font-size: 24rpx;
    color: #999;
  }
  
  .data-badge {
    position: absolute;
    top: -20rpx;
    right: -30rpx;
    background: #FF6B8B;
    color: white;
    font-size: 20rpx;
    width: 36rpx;
    height: 36rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* 订单区域 */
  .order-section {
    background: white;
    margin: 6rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    padding-bottom: 10rpx;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
    width: 660rpx;
  }
  
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
  }
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    position: relative;
    padding-left: 20rpx;
    /* 修复 section-title 伪元素样式 */
  }
  
  .section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6rpx;
    height: 30rpx;
    background: #FFB5C5;
    border-radius: 3rpx;
  }
  
  .section-right {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #999;
    /* 修复 text 样式 */
  }
  
  .arrow-icon {
    width: 24rpx;
    height: 24rpx;
    margin-left: 10rpx;
  }
  
  .order-buttons {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20rpx;
  }
  
  .order-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }
  
  .order-icon {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: 15rpx;
  }
  
  .order-btn text {
    font-size: 24rpx;
    color: #666;
  }
  
  .order-badge {
    position: absolute;
    top: -10rpx;
    right: 10rpx;
    background: #FF6B8B;
    color: white;
    font-size: 20rpx;
    min-width: 36rpx;
    height: 36rpx;
    border-radius: 18rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8rpx;
  }
  
  /* 功能入口 */
  .feature-section {
    width: 650rpx;
    background: white;
    margin: rpx;
    border-radius: 20rpx;
    padding: 30rpx;
    box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.03);
  }
  
  .feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30rpx;
  }
  
  .feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .feature-icon {
    width: 80rpx;
    height: 80rpx;
    margin-bottom: 15rpx;
    background: #FFF0F5;
    border-radius: 50%;
    padding: 20rpx;
    box-sizing: border-box;
  }
  
  .feature-item text {
    font-size: 24rpx;
    color: #666;
  }
  
  .phoneImg {
    margin-left: 100rpx;
    width: 40rpx;
    height: 50rpx;
    border-radius: 20rpx;
  }
  
  .phone-button {
    border: none;
    padding: 0;
    margin: 0;
    background: none;
    display: flex;
    align-items: center;
  }

  //授权样式
  //店铺
  .login-image{
    padding: 25rpx;
    image{
      width: 60rpx;
      height: 60rpx;
    }
    text{
      position: relative;
      bottom: 10rpx;
      font-weight: bold;
      margin-left: 20rpx;
    }
  }
  //头像
  .viewgetimg{
    margin: 30rpx 30rpx 0 30rpx;
    padding-bottom: 10rpx;
    border-bottom: solid 1px rgb(221, 221, 221);
    
    image{
      width: 90rpx;
      height: 90rpx;
      border-radius: 50%;
    }
    .text-tou{
     position: relative;
     bottom: 30rpx;
     margin-right: 30rpx;
    }
    .text-jiantou{
      position: relative;
      left: 450rpx;
      bottom: 20rpx;
      color: gray;
    }
  }
  //昵称
  .viewgetname{
    display: flex;
    margin: 30rpx 30rpx 0 30rpx;
    padding:20rpx 0;
    border-bottom: solid 1px rgb(221, 221, 221);
    input{
      width: 300rpx;
      margin-left: 20rpx;
    }
  }
  //随机头像或昵称
  .last-box{
    margin: 20rpx 30rpx;
    font-size: 26rpx;
    color: hsl(231, 52%, 44%);
  }
  //按钮
  .last-but{
    display: flex;
    button{
      font-weight:200;
      font-size: 25rpx;
      line-height: 70rpx;
       width:600rpx;
       height: 100rpx;
       margin: 20rpx 30rpx;
       background-color: #eaeaea;
    }
    .but-ok{
      background-color: #25b5bd;
    }
  }
.logo {
    /* 基础样式 */
    animation: float 2s ease-in-out infinite alternate;
  }
  
  @keyframes float {
    0% {
      transform: translateY(0) scale(1);
      opacity: 0.85;
    }
    100% {
      transform: translateY(-10rpx) scale(1.02);
      opacity: 0.95;
    }
  }
/* 底部图片容器 */
.footer-image {
    position: relative;
    margin-top: 60rpx;
    text-align: center;
    z-index: 1;
    overflow: hidden;
  }
  
  /* 渐变遮罩层 */
  .footer-image::before {
    content: '';
    position: absolute;
    top: -80rpx;
    left: 0;
    right: 0;
    height: 150rpx;
    background: linear-gradient(to bottom, rgba(255,217,225,0.1), #fafafa 70%);
    z-index: -1;
  }
  
  /* 图片样式 */
  .logo {
    width: 110rpx;
    opacity: 0.9;
    filter: 
      drop-shadow(0 1rpx 15rpx rgba(255, 126, 154, 0.2))
      brightness(1.05);
    transition: all 0.3s ease;
    transform: translateY(20rpx);
    margin-top: -180rpx;
  }
  
  /* 描述文字 */
  .desc {
    margin-top: -130rpx;
    font-size: 24rpx;
    color: rgb(95, 95, 95);
    letter-spacing: 2rpx;
    opacity: 0.8;
  }

  /* 隐藏按钮 */
.invisible-button {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100%;
  opacity: 0; /* 完全透明 */
  z-index: 10; /* 置于顶层 */
}
.viewgetimg {
  position: relative; /* 定位参照 */
}